<template>
    <div class="spheader">
        <routerheader></routerheader>
        <div class="common-layout">
            <el-container>
                <el-aside width="200px">
                    <tagleft></tagleft>
                </el-aside>
                <el-container>
                    <el-main style="height: 100%;">
                        <RouterView></RouterView>
                    </el-main>
                    <el-footer>
                        <fenye></fenye>
                    </el-footer>
                </el-container>
            </el-container>
        </div>
    </div>
</template>
<script setup>
const props = defineProps(["tagLeft"])
</script>
<style scoped>
.spheader {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.common-layout {
    flex: 1
}
.common-layout ul {
    background-color: aqua;
    height: 100%;
}
.el-container {
    background-color: gainsboro;
    height: 100%;
}
button {
    width: 100%;
    height: 100%;
    text-align: center;
    padding: 20px 0;
    border: 0;
    background-color: aqua;
}
.el-main{
    overflow: hidden;
}
/* 分页 */
.el-footer {
    display: flex;
    justify-content: center;
}
</style>
<script>
import routerheader from "../components/routerheader.vue"
import fenye from "../components/fenye.vue"
import fott from "../components/fenye.vue"
export default {
    components: { routerheader, fott, fenye }
}
</script>